<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
	request.setAttribute("path", request.getContextPath());
%>
<!DOCTYPE html>
<html>
<head>
	<title>致-青春   ${userInfo.usr }的主页</title>
	<link rel="stylesheet" type="text/css" href="${path}/css/base.css" />
	<script type="text/javascript" src="${path}/js/jquery-1.10.2.min.js"></script>
	<script type="text/javascript">
		function notice(id) {
			var myId = '${sessionScope.user.id }';
			if (myId == "") {
				alert("请先登录");
				return;
			}
			$.post("${path}/noticeUser.html", 
					{
						id : id,
						myId : myId
					},
					function(data) {
						if (data == "true") {
							$("#cancel_button").show();
							$("#contact_button").hide();
						}
					});
		}
		
		function cancel(id) {
			var myId = '${sessionScope.user.id }';
			$.post("${path}/cancelNoticeUser.html", 
					{
						id : id,
						myId : myId
					},
					function(data) {
						if (data == "true") {
							$("#cancel_button").hide();
							$("#contact_button").show();
						}
					});
		}
		
		$(function(){
			var isContact = "${isContact}";
			if (isContact == "true") {
				$("#cancel_button").show();
				$("#contact_button").hide();
			} 
		});
				
		function newArticle() {
			location = "userNewArticle.html";
		}
		
		function mail(id) {
			location = "newbox.html?id=" + id;
		}
		
		function setup() {
			location = "userInfo.html";
		}
	</script>
</head>
<body>
	<div id="container">
		<jsp:include page="/page/common/header.jsp"></jsp:include>
		<div id="kernel" class="center-box">
			<div class="user-zone">
				<div class="user-info">
					<div class="user-self">
						<a href=""><img alt="user-avatar" src="img/no-photo.png"></a>
						<h3>${userInfo.usr }</h3>
						<div> 
							${userInfo.intro }
						</div>
						<div>
							<c:if test="${userInfo.id != sessionScope.user.id }">
							<input type="button" value="发消息" onclick="mail('${userInfo.id}')" />
							
							<input type="button" value="关注" onclick="notice('${userInfo.id}')" id="contact_button"/>
							<span id="cancel_button" style="display: none; "><a href="javascript:;" onclick="cancel('${userInfo.id}')">取消关注</a></span>
							</c:if>
							<c:if test="${userInfo.id == sessionScope.user.id }">
								<input type="button" value="设置" onclick="setup();" />
							
								<input type="button" value="发表新文章" onclick="newArticle();" />
							</c:if>
						</div>
					</div>
					
					<!-- 邮件 -->
					<div>
						<div class="thead">
							<h3>收件箱</h3>
							<div>							
								<a href="inbox.html?id=${userInfo.id }">更多</a>
							</div>
						</div>
						<ul style="clear: both;">
							<li>a</li>
							<li>a</li>
							<li>a</li>
						</ul>
						<div>
							<a href="">发件箱</a>
						</div>
					</div>
					<!-- 邮件(end) -->
					
					<div class="user-fan">
						<h3>关注的人</h3>
						<!-- <div>
							<a href="">更多</a>
						</div> -->
						<table style="width: 270px;">
						<c:set var="co" value="0"></c:set>
						<c:forEach items="${contactList }" var="c" varStatus="st">
							<c:if test="${st.index % 3 == 0 }"><tr></c:if>
							<td style="width: 90px;">
								<a href="user.html?id=${c.contactId }">
									<img alt="${c.contactName }" src="img/no-photo.png"><br />
									${c.contactName }
								</a>
								<%-- 为了处理不满3个td时的补全问题，设一个变量 --%>
								<c:set var="co" value="${st.index + 1}"></c:set>
							</td>
							<c:if test="${st.index % 3 == 2 }"></tr></c:if>
						</c:forEach>
						<%-- 为了处理不满3个td时的补全问题 --%>
						<c:if test="${co % 3 != 0 }">
							<c:set var="rest_co" value="${3 - co % 3 }"></c:set>
							<c:forEach begin="1" end="${rest_co }" step="1">
								<td style="width: 90px;"></td>
							</c:forEach>
							</tr>
						</c:if>
<!-- 							<tr>
								<td><a href=""><img alt="user-avatar" src="img/no-photo.png"></a></td>
								<td><a href=""><img alt="user-avatar" src="img/no-photo.png"></a></td>
								<td><a href=""><img alt="user-avatar" src="img/no-photo.png"></a></td>
							</tr>
							<tr>
								<td><a href=""><img alt="user-avatar" src="img/no-photo.png"></a></td>
								<td><a href=""><img alt="user-avatar" src="img/no-photo.png"></a></td>
								<td><a href=""><img alt="user-avatar" src="img/no-photo.png"></a></td>
							</tr>
							<tr>
								<td><a href=""><img alt="user-avatar" src="img/no-photo.png"></a></td>
								<td></td>
								<td></td>
							</tr>
 -->						</table>
					</div>				
				</div>
				<div class="user-action">
					<div class="user-article">
						<div class="thead">
							<h3>文章</h3>
							<div><a href="userArticle.html?id=${userInfo.id }">更多</a></div>
						</div>
						<ul>
						<c:forEach items="${articleList }" var="article">
							<li>
								<a href="article.html?id=${article.id }">${article.title }</a>
							</li>
						</c:forEach>
						</ul>
					</div>
					<div class="user-article">
						<div class="thead">
							<h3>评论</h3>
							<div><a href="userComment.html?id=${userInfo.id }">更多</a></div>
						</div>
						<ul>
						<c:forEach items="${commentList }" var="comment">
							<li>
								<a href="article.html?id=${comment.articleId }">${comment.content }</a>
							</li>
						</c:forEach>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<jsp:include page="/page/common/footer.jsp"></jsp:include>
	</div>
</body>
</html>